import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import "./rank.css"
@inject("rank")
@observer

export default class rank extends Component<any,any> {
    componentDidMount() {
        this.props.rank.getTopList()     
      }
    render() {
        const {guan,quan } = this.props.rank
        return (
            <div className="rank">
                <h1>官方榜</h1>
                <div className="guan">
                        {
                            guan.map((item:any,index:number)=>{
                                return <dl key={index}>
                                    <dd>
                                        
                                        <img key={index} src={item.coverImgUrl} alt=""/>
                                    </dd>
                                    <dt>
                                        {
                                           item.tracks.map((item:any,index:number)=>{
                                           return <p key={index}>{index+1}.{item.first}</p>
                                           }) 
                                        }
                                    </dt>
                                </dl>
                            })
                        }
                    
                </div>
                <h1>全球榜</h1>
                <div className="quan">
                {
                            quan.map((item:any,index:number)=>{
                                return <li key={index}><img src={item.coverImgUrl} alt=""/></li>
                            })
                        }
                </div>
            </div>
        )
    }
}
